<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// 引入 FloatingChat 组件
import FloatingChat from './FloatingChat.vue'

const route = useRoute()
const router = useRouter()

// 搜索
const input = ref('')


//文章列表数据模型
const articles = ref([
    {
        "id": "1",
        "name": "AP-1",
        "report": "深度分析报告1",
        "message": "疑似检测遭遇网络攻击,详情请点击报告查看!",
        "time": "2025-6-1 16:40:04"
    },
    {
        "id": '2',
        "name": "AP-4",
        "report": "深度分析报告2",
        "message": "疑似检测遭遇网络攻击,详情请点击报告查看!",
        "time": "2025-6-1 16:40:04"
    },
    {
        "id": '3',
        "name": "AP-5",
        "report": "深度分析报告3",
        "message": "疑似检测遭遇网络攻击,详情请点击报告查看!",
        "time": "2025-6-1 16:40:04"
    },
    {
        "id": '16',
        "name": "AP-6",
        "report": "深度分析报告4",
        "message": "疑似检测遭遇网络攻击,详情请点击报告查看!",
        "time": "2025-6-1 16:40:04"
    },
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
}


// AI 接口调用
// 原有方法
const oldMethod = () => {
  console.log('执行原有逻辑');
  router.push('/ai/aiDetail/' + 1);
};

// 使用 ref 引用 FloatingChat 组件
const floatingChatRef = ref(null)

// 新的组合方法
const handleAnalysis = async() => {
  oldMethod();

  // 后端使用这段代码有响应
  try {
    const response = await fetch('http://localhost:80/ai/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        "messages": [
          {
            "role": "",
            "content": "今天天气怎么样"
          }
        ]
      })
    })

    if (response.ok) {
      const data = await response.json()
      const assistantMessage = {
        role: 'assistant',
        content: data.content
      }
    } else {
      console.error('Error:', response.status)
    }
  } catch (error) {
    console.error('Error:', error)
  }
  //
  // // 打开悬浮球
  // floatingChatRef.value.toggleChat();
  // // 调用AI分析方法
  // await floatingChatRef.value.AIanalize();
};



</script>

<template>
    <div class="viewport">
        <h3>网络攻击深度分析报告</h3>
        <div class="head">
            <img src="@/assets/ai1.jpg" alt="">
        </div>
        <div class="line"  v-for="a in articles">
            <div class="detail">
                <div class="icon" style="margin-top: 4px;"><el-icon :size="20" color="red"><Warning /></el-icon></div>
                <div class="id">{{ a.id }}</div>
                <div class="report">{{ a.report }}</div>
                <div class="message">{{ a.message }}</div>
                <div class="time">{{ a.time }}</div>
                <div class="button"><el-button type="primary" @click="handleAnalysis">AI分析</el-button></div>
            </div>
        </div>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" layout="total, prev, pager, next"
            background :total="total" @size-change="onSizeChange" @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end" />
    </div>
</template>

<style scoped lang="scss">
.viewport {
    background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 780px;

    display: flex;
    flex-direction: column;


    h3 {
        font-size: 20px;
        color: #fff;
        font-weight: 400;
        margin-left: 20px;
    }

    .head {
        // background-color: red;
        // border-radius: 5%;
        display: flex;
        flex-direction: column;
        align-items: center;

        img {

            width: 1450px;
            height: 380px;
            border-radius: 15px;
        }
    }

    .line {
        width: 1000px;
        height: 50px;
        line-height: 50px;
        // background-color: #fff;
        margin-left: 15px;
        margin-top: 40px;
        padding: 5px;

        display: flex;
        flex-direction: row;
        // justify-content: center;

        .detail{
            color: #fff;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: 100%;
        }
    }


}
</style>